<template>
  <div class="page-extend">
    <div class="page-extend-info">
      <a-form :model="formState" :labelCol="{ style: { width: '84px' } }" :colon="false" labelAlign="right">
        <a-form-item label="图集关键词">
          <a-input
            v-model:value="formState.picture_keyword"
            placeholder="多个关键词使用逗号“,”分隔"
            class="w-[616px]"
          />
        </a-form-item>
        <a-form-item label="图集标签">
          <a-select
            v-model:value="formState.picture_tags_copy"
            :token-separators="[',']"
            mode="tags"
            class="w-[616px] mr-[8px]"
            max-tag-count="responsive"
            placeholder="多个标签使用逗号“,”分隔"
            @change="handleChange"
            :options="tagList"
            :fieldNames="{ label: 'tag_name', key: 'tag_name', value: 'tag_name' }"
            :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
          >
          </a-select>
        </a-form-item>
      </a-form>
    </div>
    <div class="page-extend-popularity">
      <div class="page-extend-popularity-title">图集人气</div>
      <span class="page-extend-popularity-explain">
        人气 = 浏览量 + 100*点赞量 + 100*收藏量 + 100*分享量<br />
        开启人气补偿后，图集人气 = 补偿人气 + 用户真实数据计算的人气</span
      >
    </div>
    <div class="page-extend-startLevel">
      <div class="page-extend-startLevel-box">
        <div class="page-extend-startLevel-box-level">
          <span>推荐星级</span>
          <a-rate v-model:value="formState.picture_pop_add_star" disabled allow-half />
          <div>
            <a-button type="primary" size="small" v-if="!isPopularity" @click="onPopularityChange(true)">
              开启人气补偿</a-button
            >
            <a-button danger size="small" v-else class="closeRedress" @click="onPopularityChange(false)"
              >关闭人气补偿
            </a-button>
          </div>
        </div>
        <div class="page-extend-startLevel-box-itemBox">
          <div class="page-extend-startLevel-box-itemBox-item">
            <div class="title">总人气</div>
            <span class="totalNumber">{{
              formatNumber(Number(formState.picture_pop_total) + Number(formState.picture_pop_add_total))
            }}</span>
          </div>
          <div class="page-extend-startLevel-box-itemBox-item">
            <div class="title">日人气</div>
            <span class="totalNumber">{{
              formatNumber(Number(formState.picture_pop_day) + Number(formState.picture_pop_add_day))
            }}</span>
          </div>
          <div class="page-extend-startLevel-box-itemBox-item">
            <div class="title">周人气</div>
            <span class="totalNumber">{{
              formatNumber(Number(formState.picture_pop_week) + Number(formState.picture_pop_add_week))
            }}</span>
          </div>
          <div class="page-extend-startLevel-box-itemBox-item">
            <div class="title">月人气</div>
            <span class="totalNumber">{{
              formatNumber(Number(formState.picture_pop_month) + Number(formState.picture_pop_add_month))
            }}</span>
          </div>
          <div class="page-extend-startLevel-box-itemBox-item"></div>
          <div class="page-extend-startLevel-box-itemBox-item">
            <div class="title">评分人数</div>
            <span class="totalNumber">{{
              formatNumber(Number(formState.picture_pop_people_count) + Number(formState.picture_pop_add_people_count))
            }}</span>
          </div>
          <div class="page-extend-startLevel-box-itemBox-item">
            <div class="title">浏览量</div>
            <span class="totalNumber">{{
              formatNumber(Number(formState.picture_pop_view) + Number(formState.picture_pop_add_view))
            }}</span>
          </div>
          <div class="page-extend-startLevel-box-itemBox-item">
            <div class="title">点赞</div>
            <span class="totalNumber">{{
              formatNumber(Number(formState.picture_pop_like) + Number(formState.picture_pop_add_like))
            }}</span>
          </div>
          <div class="page-extend-startLevel-box-itemBox-item">
            <div class="title">收藏</div>
            <span class="totalNumber">{{
              formatNumber(Number(formState.picture_pop_collection) + Number(formState.picture_pop_add_collection))
            }}</span>
          </div>
          <div class="page-extend-startLevel-box-itemBox-item">
            <div class="title">分享</div>
            <span class="totalNumber">{{
              formatNumber(Number(formState.picture_pop_share_count) + Number(formState.picture_pop_add_share_count))
            }}</span>
          </div>
        </div>
      </div>
      <div class="page-extend-startLevel-compensate" v-if="showCompensateBox">
        <div class="page-extend-startLevel-compensate-title">补偿人气</div>
        <div class="page-extend-startLevel-compensate-level">
          <span>推荐星级</span>
          <a-rate v-model:value="formState.picture_pop_add_star" allow-half />
        </div>
        <div class="page-extend-startLevel-compensate-itemBox">
          <div class="page-extend-startLevel-compensate-itemBox-item">
            <div class="title">总人气</div>
            <a-input-number v-model:value="formState.picture_pop_add_total" placeholder="总人气" class="input-w-90" />
          </div>
          <div class="page-extend-startLevel-compensate-itemBox-item">
            <div class="title">日人气</div>
            <a-input-number v-model:value="formState.picture_pop_add_day" placeholder="日人气" class="input-w-90" />
          </div>
          <div class="page-extend-startLevel-compensate-itemBox-item">
            <div class="title">周人气</div>
            <a-input-number v-model:value="formState.picture_pop_add_week" placeholder="周人气" class="input-w-90" />
          </div>
          <div class="page-extend-startLevel-compensate-itemBox-item">
            <div class="title">月人气</div>
            <a-input-number v-model:value="formState.picture_pop_add_month" placeholder="月人气" class="input-w-90" />
          </div>
          <div class="page-extend-startLevel-compensate-itemBox-item"></div>
          <div class="page-extend-startLevel-compensate-itemBox-item">
            <div class="title">评分人数</div>
            <a-input-number
              v-model:value="formState.picture_pop_add_people_count"
              placeholder="评分人数"
              class="input-w-90"
            />
          </div>
          <div class="page-extend-startLevel-compensate-itemBox-item">
            <div class="title">播放量</div>
            <a-input-number v-model:value="formState.picture_pop_add_view" placeholder="播放量" class="input-w-90" />
          </div>
          <div class="page-extend-startLevel-compensate-itemBox-item">
            <div class="title">点赞</div>
            <a-input-number
              v-model:value.number="formState.picture_pop_add_like"
              placeholder="点赞"
              class="input-w-90"
            />
          </div>
          <div class="page-extend-startLevel-compensate-itemBox-item">
            <div class="title">收藏</div>
            <a-input-number
              v-model:value="formState.picture_pop_add_collection"
              placeholder="收藏"
              class="input-w-90"
            />
          </div>
          <div class="page-extend-startLevel-compensate-itemBox-item">
            <div class="title">分享</div>
            <a-input-number
              v-model:value="formState.picture_pop_add_share_count"
              placeholder="分享"
              class="input-w-90"
            />
          </div>
        </div>
      </div>
    </div>
    <modal-view
      title="提示"
      v-model:visible="visible"
      okText="确定"
      cancelText="取消"
      :width="458"
      @confirm="popularityConfirm"
      @cancel="popularityCancel"
    >
      <span>关闭人气补偿后，该图集将仅展示用户真实人气，确定要关闭吗？</span>
    </modal-view>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'
import { formState, randomFunc, resetExtendFunc, isPopularity } from './state'
import ModalView from '@/components/components/modal/ModalView.vue'
import { formatNumber } from '@/utils/format'

import type { TagData } from '@/types/site/tag/tagList'
import apis from '@/apis'
import { storage } from '@/utils/storage'
const {
  site: { tag_list }
} = apis
const visible = ref(false)
const tagList = ref<any[]>([])
const siteId = storage.get('siteId') //站点id
const showCompensateBox = ref(false) //是否显示补偿内容
const onPopularityChange = (type: boolean) => {
  if (!type) {
    //关闭
    visible.value = true
  } else {
    //开启
    isPopularity.value = true
    showCompensateBox.value = true
    randomFunc()
    formState.picture_pop_add_star = getMaxScore()
  }
}
//获取图集专辑数据
const getTagList = () => {
  tag_list({ site_id: siteId, module: 2 }).then((res: any) => {
    console.log(res.tags, 'tags')
    res.tags.map((item: TagData) => {
      tagList.value.push({
        tag_name: item.tag_name,
        tag_id: item.tag_id
      })
    })
    console.log('tagList: ', tagList.value)
  })
}
const getMaxScore = () => {
  return Math.max(formState.picture_pop_add_star, formState.picture_pop_star)
}
const handleChange = (value: string[], option: any) => {
  console.log(`selected ${value}`, value.toString())
  console.log('option: ', option)
  option.forEach((item: any, index: number) => {
    if (!item.tag_name && !item.tag_id) {
      item.tag_name = ''
      item.tag_id = 0
    }
  })
  const arr = value.toString().split(',')
  option.forEach((item: any, index: number) => {
    item.tag_name = arr[index]
  })
  console.log('option3: ', option)
  formState.picture_tags = [...option]
  console.log(formState.picture_tags_copy, 'formState.picture_tags_copy')
}
/**
  开启关闭人气对话框事件
 */
const popularityConfirm = (value: boolean) => {
  console.log('value: ', value)
  isPopularity.value = value
  showCompensateBox.value = false
  visible.value = value
  formState.picture_pop_star = 0
  resetExtendFunc()
}
const popularityCancel = () => {
  visible.value = false
}
watch(
  () => isPopularity.value,
  (val) => {
    console.log('vaisPopularity=================l: ', val)
    formState.picture_pop_compensated = val ? 1 : 2
    showCompensateBox.value = val ? true : false
  },
  {
    deep: true,
    immediate: true
  }
)

onMounted(() => {
  getTagList()
})
</script>

<style lang="less" scoped>
.page-extend {
  width: 100%;

  &-info {
    width: 1200px;
    border-bottom: 1px solid #f0f0f0;
  }

  &-popularity {
    margin-top: 16px;

    &-title {
      font-size: 16px;
      color: #262626;
      letter-spacing: 1.14px;
      font-weight: 500;
      margin-bottom: 16px;
    }

    &-explain {
      font-size: 12px;
      color: #595959;
      letter-spacing: 0;
    }
  }

  &-startLevel {
    padding: 16px 0 32px;
    box-sizing: border-box;
    border-bottom: 1px solid #f0f0f0;

    &-box {
      width: 874px;
      height: 160px;
      border: 1px solid rgba(217, 217, 217, 1);
      border-radius: 3px;
      font-size: 14px;
      padding: 22px 26px 22px 16px;
      box-sizing: border-box;

      &-level {
        color: #595959;
        display: flex;
        align-items: center;

        .ant-rate {
          font-size: 15px;
          margin-left: 16px;
        }

        div {
          flex: 1;

          display: flex;
          justify-content: flex-end;

          .ant-btn {
            width: 92px;
            font-size: 12px;
          }

          .closeRedress {
            background-color: rgba(254, 76, 77, 0.08);
          }
        }
      }

      &-itemBox {
        font-size: 14px;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        margin-top: 18px;

        &-item {
          width: 20%;
          height: 32px;
          text-align: center;
          margin-bottom: 16px;
          display: flex;

          .title {
            width: 56px;
            color: #595959;
            text-align: right;
          }

          .totalNumber {
            color: #262626;
            margin-left: 16px;
          }
        }
      }
    }

    &-compensate {
      width: 874px;
      height: 196px;
      background-color: #fafafa;
      border-radius: 3px;
      margin-top: 16px;
      padding: 16px;
      box-sizing: border-box;

      &-title {
        font-size: 14px;
        color: #262626;
        letter-spacing: 1px;
        font-weight: 500;
        margin-bottom: 22px;
      }

      &-level {
        color: #595959;
        display: flex;
        align-items: center;

        .ant-rate {
          font-size: 15px;
          margin-left: 16px;
        }
      }

      &-itemBox {
        font-size: 14px;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        margin-top: 18px;

        &-item {
          width: 20%;
          height: 32px;
          display: flex;
          text-align: center;
          margin-bottom: 16px;
          align-items: center;

          .input-w-90 {
            width: 90px;
          }

          .title {
            width: 56px;
            color: #595959;
            text-align: right;
            margin-right: 8px;
          }

          .totalNumber {
            color: #262626;
            margin-left: 16px;
          }
        }
      }
    }
  }
}
</style>
